<template>
    <div class="main-container">
        <navbar :title="goodsinfo.title"></navbar>
        <div class="goodsContainer">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <div class="goodsImgContainer">
                            <swipe :imgList="imglist" :isImgAuto="true"></swipe>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mui-card info">
                <div class="mui-card-header">
                    <h1>{{goodsinfo.title}}</h1>
                </div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <div class="price">
                            <span class="now">售价￥{{goodsinfo.price | priceFormat}}</span>
                            <span class="old">市场价￥{{goodsinfo.oldprice |priceFormat}}</span>
                        </div>
                        <div class="buynum">
                            <span>购买数量：</span>
                            <!-- <div class="mui-numbox" data-numbox-min='1'>
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input id="test" class="mui-input-numbox" type="number" value="1" />
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div> -->
                            <!-- 向子组件传递事件和属性 -->
                            <numberBox @getnum="getSelectCount" :max_stock="goodsinfo.yu"></numberBox>
                            <!-- 小球 -->
                            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                                <div class="ball" ref="ball" v-show="flagball"></div>
                            </transition>
                        </div>
                        <mt-button type="primary" @click="buy">立即购买</mt-button>
                        <mt-button type="danger" @click="addCart">加入购物车</mt-button>
                    </div>
                </div>
            </div>
            <div class="mui-card">
                <div class="mui-card-header">商品参数</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p>商品货号：拯救者Y7000</p>
                        <p>库存情况：{{goodsinfo.yu}}件</p>
                        <p>上架时间：2018-01-30</p>
                        <p>其它说明：第八代智能英特尔酷睿六核处理器i7-8750H</p>
                    </div>
                </div>
                <div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="$router.push({name:'goodsDesc', params: {id:id} })">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="$router.push({name:'goodsComment', params: {id:id} })">商品评论</mt-button>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    //导入封装的轮播组件
    import swipe from '../mtuiswipe.vue'

    //导入数量加减框
    import numberBox from '../numberBox.vue'

    import NavBar from '../common/navbar.vue'
    export default {
        data() {
            return {
                //商品ID
                id: this.$route.params.id,
                //商品详情
                goodsinfo: [],
                imglist: [{
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n0/jfs/t19225/206/1269058000/160653/b8379287/5ac1e879N3153c619.jpg'
                    },
                    {
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n1/s546x546_jfs/t2656/295/34058120/362134/d92995e5/56fc835dNe349b797.jpg'
                    },
                    {
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n0/jfs/t24124/177/709571419/289070/1a4aaa6d/5b3d7bf7N4333990b.jpg'
                    },
                    {
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n0/jfs/t18448/214/581406193/459791/4b487315/5a968786Nf4413c56.jpg'
                    },
                    {
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n0/jfs/t19225/206/1269058000/160653/b8379287/5ac1e879N3153c619.jpg'
                    },
                    {
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n0/jfs/t19225/206/1269058000/160653/b8379287/5ac1e879N3153c619.jpg'
                    },
                    {
                        id: '12321',
                        src: 'https://img14.360buyimg.com/n0/jfs/t19225/206/1269058000/160653/b8379287/5ac1e879N3153c619.jpg'
                    }
                ],
                //隐藏小球动画
                flagball: false,

                // 用户购买的商品数量
                selectCount: 1,

                //商品库存，传递给子组件来限制最大库存数 
                stock: undefined
            }
        },
        created() {


            //模拟从数据库获取 库存 stock
            /* setInterval(x => {
                if (!this.stock)
                    this.stock = 1;
                else
                    this.stock += 1;
            }, 1000); */

            this.$http.get("api/getgoodinfo?id=" + this.id).then(
                res => {
                    console.log("获取商品详情成功");
                    console.log(res);
                    if (res.body.status == 0) {
                        this.goodsinfo = res.body.message;

                        //imglist
                        // this.imglist.forEach(item => {
                        //     item.src = item.imgsrc;
                        // });

                        this.imglist = [{
                            id: this.goodsinfo.id,
                            src: this.goodsinfo.imgsrc
                        }].concat(this.imglist);

                    } else {
                        console.log("no");
                    }
                },
                res => {
                    console.log("error callback");
                    console.log(res);
                }
            );


        },
        components: {
            swipe,
            numberBox,
            navbar: NavBar
        },
        methods: {
            //立即购买
            buy() {
                this.$store.commit('addGoods', {
                    id: this.id,
                    count: this.selectCount,
                    title: this.goodsinfo.title,
                    imgsrc: this.goodsinfo.imgsrc,
                    price: this.goodsinfo.price,
                    enable: true
                })

                this.$router.push({
                    name: 'cart'
                })
            },
            //加入购物车
            addCart() {
                this.flagball = !this.flagball;

                // 因为 加入购物车 按钮 属于 goods 组件页面， 数字加减框属于 numberBox 组件页面， 所以无法直接拿到 数量 值。
                // 这涉及到子组件向父组件传值的问题（事件调用机制）
                // 父组件 向 子组件 传递一个 方法， 子组件调用这个方法，同时把结果作为参数传给这个方法。


                //console.info('addCart 触发后拿到的 num ：' + this.selectCount);

                //把获得的数据保存到 vuex
                this.$store.commit('addGoods', {
                    id: this.id,
                    count: this.selectCount,
                    title: this.goodsinfo.title,
                    imgsrc: this.goodsinfo.imgsrc,
                    price: this.goodsinfo.price,
                    enable: true // 默认加入购物车 enable：true，表示启用
                })
            },
            // 这个方法用于传递给 子组件numberBox
            getSelectCount(count) {
                this.selectCount = count;
                console.info('父组件拿到的 num ：' + count);
            },

            beforeEnter(el) {
                el.style.transform = "translate(0, 0)"
            },
            enter(el, done) {

                //小球与购物车位置的横纵坐标分别相减，获得结果就是位移的距离。
                //el.getBoundingClientRect() 用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
                const ballPositon = this.$refs.ball.getBoundingClientRect();
                const cartBadgePositon = document.getElementById('cartBadge').getBoundingClientRect();
                el.offsetWidth
                //el.style.transform = "translate(98px, 249px)"
                const xPoint = cartBadgePositon.left - ballPositon.left;
                const yPoint = cartBadgePositon.top - ballPositon.top;
                //el.style.transform = 'translate(${xPoint}px , ${yPoint}px)';
                el.style.transform = 'translate(' + xPoint + 'px , ' + yPoint + 'px)';
                el.style.transition = 'all .5s cubic-bezier(0.4, -0.3, 1, 0.68)';

                done();

            },
            afterEnter(el) {
                // 动画完成之后，会调用 afterEnter
                // console.log('ok')
                this.flagball = !this.flagball;
            }
        }

    }
</script>

<style lang="scss" scoped>
    .goodsContainer {
        background-color: #ccc;
        overflow: hidden;

        .goodsImgContainer {

            // height: 200px;
            .mint-swipe {
                img {
                    width: auto;
                    height: 100%;
                }
            }
        }
        .mui-card {
            overflow: initial
        }
        .info {
            h1 {
                font-size: 16px;
                line-height: 1.3;
            }
            .price {
                .now {
                    font-weight: bold;
                    color: #e4393c;
                    font-size: 20px;
                }
                .old {
                    text-decoration: line-through;
                    color: #333;
                    font-size: 14px;
                }
            }
            .tip {
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                padding-top: 3px;
            }
            .buynum {
                span {
                    font-size: 16px;
                }
                margin: 10px 0;
            }
        }
        .mui-card-footer {
            display: block;

            button {
                margin-bottom: 10px;
            }
        }

        .ball {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            left: 154px;
            top: 59px;
            z-index: 99;
        }
    }
</style>